<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Basis Demos</title>

  <style type="text/css">
    HTML,
    BODY
    {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    #DemoList
    {
      padding: 10px;
    }

    #DemoList UL,
    #DemoList LI
    {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .Demo-Group
    {
      padding: 5px;
    }

    #DemoList .Demo-Group-Title
    {
      border-bottom: 1px solid #E0E0E0;
      clear: both;
      height: .5em;
      margin-bottom: .5em;
      line-height: 1em;
    }
    #DemoList .Demo-Group-Title SPAN
    {
      padding: 0 1ex;
      background: white;
    }

    #DemoList .Demo-Group-Content
    {
      overflow: hidden;
      padding: 5px;
    }

    #DemoList .Demo-TreeNode
    {
      width: 140px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      cursor: pointer;
      height: 100%;
    }
    #DemoList .Demo-TreeNode A
    {
      padding-top: 4px;
      display: block;
      text-decoration: none;
      color: #333;
      border-radius: 3px;
      background: white;
    }
    #DemoList .Demo-TreeNode A:hover
    {
      background: #F0F0F0;
    }
    #DemoList .Demo-TreeNode IMG
    {
      margin: 5px 5px 0 5px;
      border: 1px solid #D0D0D0;
      background: white;
      box-shadow: 1px 1px 3px rgba(0,0,0,.15);
    }
    #DemoList .Demo-TreeNode A:hover IMG
    {
      border-color: #BBB;
    }
    #DemoList .Demo-TreeNode .title
    {
      display: block;
      padding: 7px 10px 10px;
      text-align: center;
      font-size: 85%;
    }
    #DemoList .selected
    {
      background-color: #EAF7FF !important;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY,
    TABLE *
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <script type="text/javascript" src="../basis-all.js"></script>
</head>

<body>
  <script type="text/javascript">
    (function(){
      basis.require('basis.data');
      basis.require('basis.html');
      basis.require('basis.ui.tree');

      var Class = basis.Class;
      var Data = basis.data;
      var nsWrappers = basis.dom.wrapper;
      var nsTree = basis.ui.tree;
      var Template = basis.html.Template;
      var UIContainer = basis.ui.Container;

      var data = [
        {
          title: 'Apps',
          demos: [
            { title: 'Basis Docs', url: '../docs/index.html', image: 'apps/docs.png' },
            { title: 'Templater (template editor)', url: '../tools/templater/index.html' },
            { title: 'Blog', url: 'apps/blog.html' },
            { title: 'Todo list', url: 'apps/todo.html' },
            { title: '(external) Wallet One Cabinet', url: 'https://en.w1.ru/client', image: 'apps/w1.png' },
          ]
        },
        {
          title: 'Defile',
          demos: [
            { title: 'basis.data.dataset', url: 'defile/dataset.html' },
            { title: 'basis.data.index', url: 'defile/data_index.html' },
            { title: 'basis.ui.tabs', url: 'defile/tabs.html' },
            { title: 'basis.ui.tree', url: 'defile/tree.html' },
            { title: 'basis.ui.table', url: 'defile/table.html' },
            { title: 'basis.ui.form', url: 'defile/form.html' },
            { title: 'basis.ui.button', url: 'defile/button.html' },
            { title: 'basis.ui.window', url: 'defile/window.html' },
            { title: 'basis.ui.popup', url: 'defile/popup.html' },
            { title: 'basis.ui.label', url: 'defile/label.html' },
            { title: 'basis.ui.calendar', url: 'defile/calendar.html' },
            { title: 'basis.ui.slider', url: 'defile/slider.html' },
            { title: 'basis.ui.scroller', url: 'defile/scroller.html' },
            { title: 'basis.ui.resizer', url: 'defile/resizer.html' },
            { title: 'basis.ui.paginator', url: 'defile/paginator.html' }
            //{ title: 'basis.ui.Animation', url: 'defile/animation.html' },
          ]
        },
        {
          title: 'Speed Demos',
          demos: [
            { title: 'Tree', url: '../test/speed-tree.html', image: 'res/img/speed.png' },
            { title: 'Table', url: '../test/speed-table.html', image: 'res/img/speed.png' },
            { title: 'DataObject', url: '../test/speed-DataObject.html', image: 'res/img/speed.png' },
            { title: 'Entity', url: '../test/speed-Entity.html', image: 'res/img/speed.png' }
          ]
        },
        /*{
          title: 'Simple controls',
          demos: [
            { title: 'Tree', url: 'simple/tree.html' },
            { title: 'Tabs', url: 'simple/tabs.html' }
          ]
        },*/
        {
          title: 'Common models',
          demos: [
            { title: 'Grouping', url: 'common/grouping.html' },
            { title: 'Nested grouping', url: 'common/grouping_of_grouping.html' },
            { title: 'Match input', url: 'common/match.html' },
            { title: 'Share selection', url: 'common/selection_share.html' },
            { title: 'Multiple selections for control', url: 'common/selection_multiple.html' },
            { title: 'Selection as data source', url: 'common/selection_datasource.html' },
            { title: 'Using of satellites', url: 'common/satellite.html' }
          ]
        },
        {
          title: 'Data',
          demos: [
            { title: 'Property & DataObjectSet', url: 'data/basic.html' },
            { title: 'Entity simple', url: 'data/entity.html' },
            { title: 'Live entity edit', url: 'data/live_edit.html' },
            { title: 'Entity user list', url: 'data/userlist.html' },
            { title: 'M:M relationship editor', url: 'data/m2m.html' },
            { title: 'Build tree using dataset', url: 'data/generate_tree.html' }
          ]
        },
        {
          title: 'Ajax',
          demos: [
            { title: 'SOAP simple', url: 'ajax/soap-simple.html' },
            { title: 'SOAP list', url: 'ajax/soap-list.html' },
            { title: 'Parallel', url: 'ajax/parallel.html' }
          ]
        },
        {
          title: 'Graph',
          demos: [
            { title: 'Graph with dynamic threads', url: 'graph/dynamic-threads.html' },
            { title: 'Graph with range selection', url: 'graph/range.html' },
            { title: 'Bar Graph', url: 'graph/bar.html' }
          ]
        }
      ];

      var treeDemos = new UIContainer({
        id: 'DemoList',
        container: document.body,
        template: 
          '<ul/>',

        childClass: {
          className: 'Demo-TreeNode',
          template:
            '<li class="Demo-TreeNode" event-click="select">' +
              '<a{content} href="{url}">' +
                '<img src="{imageUrl}" event-error="setDefaultImage" width="100" height="75"/>' +
                '<span class="title">{title}</span>' +
              '</a>' +
            '</li>',

          binding: {
            title: 'data:',
            url: 'data:',
            imageUrl: function(node){
              return node.data.image || node.data.url.replace('.html', '.png');
            }
          },

          action: {
            setDefaultImage: function(){
              this.tmpl.set('imageUrl', 'res/img/noimg.png');
            }
          }/*,

          templateUpdate: function(tmpl, eventName, delta){
            tmpl.titleText.nodeValue = this.data.title;
            tmpl.title.href = this.data.url;
            tmpl.imageUrl.nodeValue = this.data.image || this.data.url.replace('.html', '.png');
          }*/
        },
        grouping: {
          childClass: {
            template: 
              '<li{element} class="Demo-Group">' +
                '<div class="Demo-Group-Title"><span>{title}</span></div>' +
                '<ul{childNodesElement} class="Demo-Group-Content"/>' +
              '</li>'
          },
          groupGetter: Function.getter('data.groupId')
        },
        childNodes: data.map(function(section){
          return section.demos.map(function(demo, idx, array){
            return {
              data: Object.extend(demo, {
                groupId: this.title
              })
            };
          }, section);
        }).flatten()
      });


    })();

  </script>
</body>

</html>
